<template>
	<PageWrapper>
		<view style="height: 100vh; background-color: #f5f5f5">
			<topLogo></topLogo>
			<view style="padding: 20px 20px; box-sizing: border-box">
				<view
					style="display: flex; background-color: #fff; align-items: center; justify-content: space-between; padding: 20px; border-radius: 8px 8px 0 0">
					<text style="font-weight: 600; font-size: 20px; color: #666666">已录入头像学生（点击修改）</text>
					<view @click="back"
						style="display: flex;align-items: center; border-radius: 3px;box-sizing: border-box; padding: 8px 20px; background-color: #0052d9">
						<text
							style="font-size: 18px;padding-top: 3px;box-sizing: border-box; color: #fff; margin-right: 9px">返回</text>
						<image src="/static/back.png" style=" width: 18px;height: 18px;" mode="">
						</image>
					</view>
				</view>
			</view>
			<view style="">
				<uni-indexed-list @click="bindClick" :type="155" :options="studentList" />
			</view>
			<up-modal v-model:show="showEnterNum" :show-confirm-button="false" title="输入学管工号" @cancel="cancel"
				width="660px">
				<view style=" width: 100%;box-sizing: border-box; padding: 30px 0px 0; border-top: 1px solid #E8E8E8 ;">
					<view style="margin-bottom: 30px">
						<text style="font-size: 20px; color: #333333">学管姓名：{{ jiaoWu }}</text>
					</view>
					<view style="margin-bottom: 50px; display: flex; align-items: center">
						<text style="font-size: 20px; color: #333333">学管工号：</text>
						<up-input :customStyle="{height:'40px'}"  fontSize='20px' placeholder="请输入学管工号" type="number" border="surround"
							v-model="managerCode"></up-input>
					</view>
					<view
						style="padding-bottom: 30px;box-sizing: border-box; display: flex;width: 100%;justify-content: center;">
						<view @click="cancel"
							style="margin-right: 15px; display: flex;justify-content: center;align-items: center; width: 132px;height: 48px;background: #E1E1E1;border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;font-size: 20px;color: #6B6B6B;">返回</text>
						</view>
						<view @click="callBackModal" style="display: flex;justify-content: center;align-items: center; width: 132px;
						height: 48px;
						background: #0052D9;
						border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;
						font-size: 20px;
						color: #fff;">确定</text>
						</view>
					</view>
				</view>
			</up-modal>
			<up-modal v-model:show="takePhoto" :showConfirmButton="false" title="提示" width="660px">

				<view
					style="width: 100%; padding: 20px 0 0; border-top: 1px solid #e8e8e8;display: flex;flex-direction: column;">
					<view style="margin-bottom: 20px; text-align: center">
						<text style="font-size: 20px; color: #333333">修改头像注意事项！</text>
					</view>
					<view
						style="margin-bottom: 30px; display: flex; flex-direction: column; font-size: 20px; color: #333333">
						<text style="margin-bottom: 20px">人脸识别规则：</text>
						<text style="margin-bottom: 20px">1.正面免冠​：学生正对镜头，双眼平视，露出完整面部（额头、眉毛、耳朵清晰可见）。</text>
						<text style="margin-bottom: 20px">2.自然状态​：不化浓妆，不戴饰品/眼镜，头发不遮眉，避免美颜滤镜。</text>
						<text style="margin-bottom: 20px">3.光线背景​：光线均匀（避免强光或昏暗），纯色简洁背景（如白墙）。</text>
						<text style="margin-bottom: 20px">4.照片通途：学生到校签到核销课程。</text>
					</view>
					<view style="padding-bottom: 30px; display: flex;width: 100%;justify-content: center;">
						<view @click="Tipcancel"
							style="margin-right: 15px; display: flex;justify-content: center;align-items: center; width: 132px;height: 48px;background: #E1E1E1;border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;font-size: 20px;color: #6B6B6B;">返回</text>
						</view>
						<view @click="toTakePhoto" style="display: flex;justify-content: center;align-items: center; width: 132px;
						height: 48px;
						background: #0052D9;
						border-radius: 8px 8px 8px 8px;">
							<text style="font-weight: 600;
						font-size: 20px;
						color: #fff;">拍照录入</text>
						</view>
					</view>
				</view>
			</up-modal>

			<FullscreenSwiper />
		</view>

	</PageWrapper>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import topLogo from '@/components/topLogo.vue';
	import PageWrapper from '@/components/PageWrapper.vue'
	import {
		getStudentFaceList,
		checkManager
	} from '@/api/getData.js'
	import FullscreenSwiper from '@/components/FullscreenSwiper.vue';
	const studentList = ref([])
	const getStudentNoFaceList = async () => {
		try {
			uni.showLoading({
				title: '请稍候...'
			})
			console.log(111,campusId.value);
			const res = await getStudentFaceList({
				campusId: campusId.value,
				isHas: 1
			});
			console.log(res);
			if (res.code == 200) {
				studentList.value = res.data.map(item => ({
					letter: item.firstLetter,
					data: item.studentList.map(student => ({
						name: student.studentName,
						id: student.studentId,
						count: student.zongHour,
						jiaoWu: student.jiaoWu
					}))
				}));
			}
		} catch (error) {
			console.log('消课学生列表请求失败', error);
		} finally {
			setTimeout(() => uni.hideLoading(), 500)
		}
	};

	const managerCode = ref(null)
	const callBackModal = async () => {
		if (managerCode.value) {
			uni.showLoading({
				title: '正在校验学管'
			})
			try {
				// console.log('请求参数', studentId.value, campusId.value);
				const res = await checkManager({
					studentId: studentId.value,
					campusId: campusId.value,
					managerCode: managerCode.value
				});
				if (res.code == 200) {
					console.log(111, res.data);
					uni.hideLoading()
					managerCode.value = null
					showEnterNum.value = false
					takePhoto.value = true
				}
			} catch (error) {
				console.log('校验学管请求失败', error);
				uni.showToast({
					title: error.message,
					icon: 'none'
				})
				uni.hideLoading()
			}
		} else {
			uni.showToast({
				title: '工号不能为空',
				icon: 'error'
			})
		}
	};
	const takePhoto = ref(false);
	const toTakePhoto = () => {
		takePhoto.value = false
		console.log('去拍照页面');
		uni.navigateTo({
			url: '/pages/takePhoto/takePhoto?campusId=' + campusId.value + '&studentId=' + studentId.value
		});
	};
	const showEnterNum = ref(false);
	const jiaoWu = ref(null)
	const studentId = ref(null)
	let timer = null
	const bindClick = (e) => {
		// if (e.item.count == 0) {
		// 	return
		// }
		console.log(e);
		jiaoWu.value = e.item.jiaoWu
		studentId.value = e.item.id
		showEnterNum.value = true;
		timer = setTimeout(() => {
			hide()
		}, 60000)
	
	};
	const hide = () => {
		managerCode.value = null
		jiaoWu.value = null
		showEnterNum.value = false;
		if (timer) clearTimeout(timer)
	}
	const back = () => {
		uni.navigateBack();
	};

	const cancel = () => {

		managerCode.value = null
		jiaoWu.value = null
		showEnterNum.value = false;
	}
	const Tipcancel = () => {
		managerCode.value = null
		jiaoWu.value = null
		takePhoto.value = false
	}

	const campusId = ref(null)
	onMounted(() => {})
	onUnmounted(() => {
		if (timer) clearTimeout(timer)
	})
	onLoad((options) => {
		campusId.value = options.campusId;
		console.log(options.campusId);
		// getStudentNoFaceList()
	});

	onShow(() => {
		uni.$emit('user:interact')
		getStudentNoFaceList()
		console.log('校区ID', campusId.value);
	})
</script>

<style></style>